<template>
	<view>
		<u-navbar title="提现" rightText="提现记录" :autoBack="true" bgColor="#F2EDED" @rightClick="rightClick"
			:placeholder="true" style="font-weight: bold;">
		</u-navbar>
		<view class="withdraw">
			<view class="flex">
				<view class="lab">提现金额</view>
				<input type="digit" v-model="money" placeholder="请输入提现金额" placeholder-class="inclass" />
			</view>
			<view class="max" @click="money=total_money">最大</view>
		</view>
		<view class="money">余额 ￥{{total_money}}</view>
		<view class="money" style="margin-right: 20rpx;font-size: 22rpx;">{{text}}</view>
		<view class="withdraw" @click="showtype=true">
			<view class="flex">
				<view class="lab">收款方式</view>
			</view>
			<view class="right">
				<image class="img1" :src="payimg" mode=""></image>
				<view class="">{{paytype}}</view>
				<image class="img2" src="../../static/down.png" mode=""></image>
			</view>
		</view>
		<u-picker :show="showtype" keyName='typename' @cancel='showtype=false' @confirm="confirm"
			:columns="columns"></u-picker>
		<view class="withdraw">
			<view class="flex">
				<view class="lab">验证码</view>
				<input type="text" v-model="captcha" placeholder="请输入验证码" placeholder-class="inclass" />
			</view>
		</view>
		<view class="code">
			<view class="" style="height: 80rpx;width: 250rpx;margin-right: 20rpx;">
				<!-- <jp-verification-literalness :contentHeight='45' ref='capture'></jp-verification-literalness> -->
				<image style="height: 100%;width: 100%;border-radius: 10rpx;" :src="imgUrlCode" mode="">
				</image>
			</view>
			<view class="" @tap="getToken">看不清换一张</view>
		</view>
		<view class="btn" @click="withdrawalbtn">提交</view>
	</view>
</template>

<script>
	import env from "@/util/env.js";
	export default {
		data() {
			return {
				showtype: false,
				imgUrlCode: 'http://www.firetigercloud.com/index.php?s=/captcha',
				columns: [
					[{
							name: '支付宝',
							disabled: false,
							value: 3,
							img: "../../static/alipay.png"
						},
						// {
						// 	name: '微信',
						// 	disabled: false,
						// 	value: 4
						// },
						{
							name: '银行卡',
							disabled: false,
							value: 1,
							img: "../../static/bankCard.png"
						}
					]
				],
				bid: '',
				money: '',
				payimg: '',
				paytype: '',
				total_money: 0,
				withdrawal_money: 0,
				captcha: '',
				val: '',
				securityCode: '我是获取的',
				lineColorList: ['rgba(0, 85, 255, 0.5)', 'rgba(85, 255, 0, 0.5)', 'rgba(255, 255, 0, 0.5)'],
				colorList: ['rgb(255, 0, 0)', 'rgb(255, 0, 127)', 'rgb(255, 0, 255)'],
				id: '',
				text: '',
				uniqid: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.$fun.ajax.post('config/withdrawal', {
				id: option.id
			}).then(res => {
				// console.log(res)
				this.total_money = res.data.money
				this.text = res.data.text
			})

			// this.$fun.ajax.post('user/withdrawalList', {

			// }).then(res => {
			// 	// console.log(res)
			// 	this.columns = res.data
			// })
			this.$fun.ajax.post('user/bankList', {

			}).then(res => {
				res.data.map((item) => {
					item.typename = item.type == 'bank' ? '银行卡' : item.type == 'alipay' ? '支付宝' : '微信'
				})
				this.columns = [res.data]
				if (res.data.length == 0) {
					this.$fun.jump(`/pageB/makemode/makemode`)
				}
			})
		},
		methods: {
			rightClick() {
				this.$fun.jump(`./withdrawList`)
			},
			getCode() {
				this.$refs.capture.drawTap()
			},
			confirm(item) {
				console.log(item)
				this.showtype = false
				this.bid = item.value[0].id
				this.paytype = item.value[0].type == 'bank' ? '银行卡:' + item.value[0].bankcode : item.value[0].type ==
					'alipay' ? '支付宝:' + item.value[0].phone : "微信:" + item.value[0].phone
				this.payimg = item.value[0].img
			},
			async getToken() {
				const res = await this.$fun.ajax.post(
					env.prod.baseUrl + 'api/withdraw/captcha', {})
				// const res=this.$fun.ajax.post('captcha/captcha',{})
				if (res.code == 1) {
					console.log(res)
					this.uniqid = res.data.uniqid
					this.imgUrlCode = res.data.src
				}
			},
			withdrawalbtn() {
				let {
					money,
					bid,
					captcha,
					uniqid
				} = this
				if (!money) {
					this.$fun.msg('请输入提现金额')
					return
				}
				if (!bid) {
					this.$fun.msg('请选提现方式')
					return
				}
				if (!captcha) {
					this.$fun.msg('请输入验证码')
					return
				}
				this.$fun.ajax.post('user/withdrawal', {
					money: this.money,
					id: this.id,
					bid: this.bid,
					code: captcha,
					uniqid: uniqid
				}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.$fun.msg(res.msg)
						this.$fun.jump('', 4, 1200)
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F2EDED;
	}

	.withdraw {
		.flex {
			display: flex;
			align-items: center;
		}

		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		margin: 30rpx 30rpx 0;
		padding: 0 20rpx;
		box-sizing: border-box;

		.lab {
			width: 120rpx;
		}

		input {
			margin-left: 50rpx;
		}

		.inclass {
			font-weight: 400;
			font-size: 28rpx;
			color: #CCCCCC;
		}

		.max {
			font-weight: 400;
			font-size: 28rpx;
			color: #FF6B4D;
		}

		.right {
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			align-items: center;

			.img1 {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.img2 {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.money {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-left: 50rpx;
		margin-top: 10rpx;
	}

	.code {
		margin: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FF6B4D;
		display: flex;
		align-items: center;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: #FF6B4D;
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
		margin: 90rpx auto;
	}
</style>